<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rowspan / Colspan</title>
    <link href="../dist/css/tableexport.min.css" rel="stylesheet">
    <link href="./examples.css" rel="stylesheet">
</head>
<body>
<noscript>
    <iframe src="//www.googletagmanager.com/ns.html?id=GTM-TL44T9" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

<a id="example-link" href="./"> << Examples</a>

<iframe src="./defaults.html" frameborder="0" width="100%" scrolling="no" onload="this.height=screen.height/2.5;"></iframe>

<main>
    <h1>Rowspan / Colspan</h1>

    <table id="rowspan-colspan-table-1">
        <tbody>
        <tr style="background: lightblue">
            <td rowspan="3" colspan="3">
                [0, 0-2] [1, 0-2]
            </td>
            <td>[0, 3]</td>
        </tr>
        <tr style="background: lightgoldenrodyellow">
            <td>[1, 3]</td>
        </tr>
        <tr style="background: lightgreen">
            <td>[2, 3]</td>
        </tr>
        <tr style="background: lightcoral">
            <td>[2, 0]</td>
            <td>[2, 1]</td>
            <td>[2, 2]</td>
            <td>[2, 3]</td>
        </tr>
        </tbody>
    </table>
</main>

<br>

<main>
    <h1>Rowspan</h1>
    <table id="rowspan-colspan-table-2">
        <tbody>
        <tr>
            <td rowspan="2">

                2016-11-15

            </td>
            <td>会员卡</td>
            <td rowspan="3">办卡</td>
            <td rowspan="2">两年卡</td>
            <td>李欢</td>
            <td rowspan="4">12345678901</td>
            <td rowspan="2">刷卡支付</td>
            <td>1000</td>
        </tr>
        <tr>
            <td>现金</td>
            <td>1980</td>
            <td>1980</td>
        </tr>
        <tr>
            <td rowspan="1">2016-11-15</td>
            <td rowspan="1">会员卡</td>
            <td rowspan="1">两年卡</td>
            <td rowspan="1">Treating myself</td>
            <td rowspan="1">13858060001</td>
            <td>刷卡支付</td>
        </tr>
        <tr>
            <td rowspan="1">2016-11-15</td>
            <td rowspan="1">会员卡</td>
            <td rowspan="1">两年卡</td>
            <td rowspan="1">Treating myself</td>
            <td rowspan="1">13858060001</td>
            <td>刷卡支付</td>
            <td>10</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        </tbody>
    </table>
</main>

<br>

<main>
    <h1>Colspan</h1>
    <table id="rowspan-colspan-table-3">
        <thead>
        <tr>
            <td>1</td>
            <td colspan="2">1</td>
            <td colspan="3">2</td>
            <td>3</td>
            <td colspan="1">3</td>
            <td>3</td>
            <td colspan="3">4</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>1000</td>
            <td>1001</td>
            <td>1002</td>
        </tr>
        <tr>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>刷卡支付</td>
            <td>1000</td>
            <td>1001</td>
            <td>1002</td>
        </tr>
        <tr>
            <td colspan="12">会员卡</td>
        </tr>
        </tbody>
    </table>
</main>

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/js-xlsx/dist/xlsx.core.min.js"></script>
<script type="text/javascript" src="../bower_components/blobjs/Blob.min.js"></script>
<script type="text/javascript" src="../bower_components/file-saverjs/FileSaver.min.js"></script>
<script type="text/javascript" src="../dist/js/tableexport.min.js"></script>
<script type="text/javascript" src="../assets/js/analytics.js"></script>
<script>

    var RowColSpan1 = document.getElementById('rowspan-colspan-table-1');
    new TableExport(RowColSpan1, {
        formats: ['xlsx', 'xls', 'csv', 'txt']
    });
    // **** jQuery **************************
    //    $(RowColSpan1).tableExport({
    //        formats: ['xlsx', 'xls', 'csv', 'txt']
    //    });
    // **************************************


    var RowColSpan2 = document.getElementById('rowspan-colspan-table-2');
    new TableExport(RowColSpan2, {
        formats: ['xlsx', 'xls', 'csv', 'txt']
    });
    // **** jQuery **************************
    //    $(RowColSpan2).tableExport({
    //        formats: ['xlsx', 'xls', 'csv', 'txt']
    //    });
    // **************************************


    var RowColSpan3 = document.getElementById('rowspan-colspan-table-3');
    new TableExport(RowColSpan3, {
        formats: ['xlsx', 'xls', 'csv', 'txt']
    });
    // **** jQuery **************************
    //    $(RowColSpan3).tableExport({
    //        formats: ['xlsx', 'xls', 'csv', 'txt']
    //    });
    // **************************************

</script>

</body>
</html>
